<template>
 <div class="remote-gadge flex-1 flex flex-col relative">
    <LazyComponent :src="url"
                   v-if="url" />

    <Model :showSetting="isSetting"
           @queryModelClosed="queryModelClosed"
           :selectFields="selectFields"
           :dataInfo="{
              businessId: pageId,
              gadgetId: id,
              gadgetType: 'RemoteGadget',
              gadgetSetting:settings
            }"
           :updateGadget="upgradeGadgetSetting" />
  </div>

</template>

<script>
import { omit } from 'lodash'
import mixinGadgetViewModule from '@/mixins/gadget-view-module'
import mixinFormatViewModule from '@/mixins/format-gadget-view-module'
import LazyComponent from "./LazyComponent.vue";

export default {
  name: 'RemoteGadget',
  components: {
    LazyComponent,
    Lastupdatetime: () => import('@/components/last-update-time/index.vue'),
    Model: () => import('@/components/gadget/query-model/query-model')
  },
  mixins: [mixinGadgetViewModule, mixinFormatViewModule],
  props: {
    dataInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      currentTime: null,
      loading: false,
      queryId: '',

      isSetting: false,
      settings: {},
      selectFields: [],
      widgetName: undefined,
      linkedDatasetList: [],
      data: [],

    }
  },

  created () {
    this.subscribeMessage('runReport', () => {
      this.query(this.refreshCount > 0 ? 'auto' : false)
      this.refreshCount = this.refreshCount + 1
    })
  },
  computed: {
    url () {
      const regex =/https?:\/\//

      if (!regex.test(this.settings.url) && this.settings.url) {
        return window.location.protocol + "//" + window.location.host + this.settings.url
      }

      return this.settings.url
    }
  },
  beforeDestroy () {

  },
  methods: {
    queryModelClosed () {
      this.isSetting = false
      this.query()
    },
    queryModelPreview () {
      this.query(true)
    },
    showQueryModel () {
      this.isSetting = true
    },

    async query () {
      try {
        if (e !== 'auto') {
          this.loading = true
        }
        let tempObj = this.returnReportLinkParam()
        if (tempObj['name'] && this.slicer['name'] && tempObj['name'] === this.slicer['name']) delete this.slicer['name']
        const params = {
          ...omit(this.slicer, 'id'),
          code: this.code,
          gadgettype: this.wgadgettype,
          widgetName: this.wName,
          pageId: this.pageId,
          gadgetId: this.id,
          type: this.filterType,
          slicer: { ...this.slicer },
          filter: this.getFilterStr()
        }
        const { data: response } = await this.$interface.reports.getReportDataInfo(params)
        this.verifyHasData(response)

        if (response.code !== 0) {
          throw response.msg
        }

        this.linkedDatasetList = response.datasetSync || []
        this.selectFields = response.selectFields || []
        this.data = response.data || []
        this.settings = response.config || {}
        this.widgetName = response.name || this.settings.headerTitle
      } catch (error) {
        this.isHasData = false
        this.data = []
        this.settings = {}
        this.taskFields = []
        if (error.response && error.response.status === 504) {
          this.errorStatus = '504'
          this.gadgetMessageBus.$emit(this.pageId + 'stopautorefresh')
        }
      } finally {
        this.currentTime = new Date()
        this.loading = false
        this.autoRefreshQuery(e)
        this.updateGadgetLoadingStatus(!this.loading)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.remote-gadget {
  flex: 1;
  padding: 0;


  &__header {
    padding: 6px 20px;
    border-bottom: 1px solid #eee;
  }
}
</style>